<template>
  <a-drawer
    :title='title'
    :maskClosable='false'
    :width='drawerWidth'
    placement='right'
    :closable='true'
    @close='handleCancel'
    :visible='visible'
    style='height: 100%;overflow: auto;padding-bottom: 53px;'>

    <template slot='title'>
      <div style='width: 100%;'>
        <span>{{ title }}</span>
        <span style='display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right'>
          <a-button @click='toggleScreen' icon='appstore' style='height:20px;width:20px;border:0px'></a-button>
        </span>
      </div>

    </template>

    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>

        <a-form-item label='名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
          <a-input placeholder='请输入名称' v-decorator="[ 'name', validatorRules.name]" />
        </a-form-item>

        <a-form-item v-if='!!model.id' label='货品类型' :labelCol='labelCol' :wrapperCol='wrapperCol'>
          <a-input placeholder='请输入货品类型' v-decorator="[ 'partType', validatorRules.partType]" :readOnly='!!model.id' />
        </a-form-item>

      </a-form>
    </a-spin>
    <div class='drawer-bootom-button' v-show='!disableSubmit'>
      <a-popconfirm title='确定放弃编辑？' @confirm='handleCancel' okText='确定' cancelText='取消'>
        <a-button style='margin-right: .8rem'>取消</a-button>
      </a-popconfirm>
      <a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
import pick from 'lodash.pick'
import moment from 'moment'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import {
  addPartType,
  editPartType
} from '@/api/api'

export default {
  name: 'MotorPartModel',
  components: {},
  data() {
    return {
      modalWidth: 800,
      drawerWidth: 700,
      modaltoggleFlag: true,
      confirmDirty: false,
      id: '', //保存货品id
      disableSubmit: false,
      imageCropperShow: false,
      validatorRules: {
        name: {
          rules: [{
            required: true, message: '请输入货品信息!'
          }]
        },
        partType: { rules: [{ required: true, message: '请输入标识!' }] }
      },
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      headers: {},
      form: this.$form.createForm(this),
      url: {}
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }

  },
  computed: {},
  methods: {
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    refresh() {
      this.id = ''
    },
    add() {
      this.refresh()
      this.edit({ activitiSync: '1' })
    },
    edit(record) {
      this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      let that = this
      that.form.resetFields()

      that.id = record.id
      that.model = Object.assign({}, record)
      that.visible = true
      that.$nextTick(() => {
        that.form.setFieldsValue(pick(this.model, 'name', 'partType'))
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.disableSubmit = false
    },
    moment,
    handleSubmit() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = Object.assign(this.model, values)

          let obj
          if (!this.model.id) {
            //根据id 判断调用添加还是修改
            formData.id = this.id
            obj = addPartType(formData)
          } else {
            obj = editPartType(formData)
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })

        }
      })
    },
    handleCancel() {
      this.close()
    },

    handleConfirmBlur(e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },

    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    }
  }
}
</script>

<style scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>